<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.box{ margin:10px; padding:10px; border:#bbb solid 1px; background:#f7f7f7;}
.m10{ margin: 10px 0;}
</style>
</head>
<body>
<div class="box">
	<a href="#1" class="ui-btn" hidefocus="true">文字按钮</a>
	<input type="button" class="ui-btn" value="文字按钮" />
	<p class="m10">
		<input type="text" class="ui-text" size="70" placeholder="自定义宽度..." />
	</p>
	<p class="m10">
		<input type="text" class="ui-text ui-disabled" size="70" value="禁止使用啊！！！" disabled/>
	</p>
	<p class="m10">
		<input type="text" class="ui-text ui-readonly" size="30" placeholder="只读..." readonly />
	</p>
	<p class="m10">
		<input type="text" class="ui-text ui-error" size="30" placeholder="错误提示..." />
	</p>

	<p class="m10">
		<textarea name="" id="" cols="30" rows="10" class="ui-text"></textarea>		
	</p>
	<p class="m10">
		<div class="ui-progress-bar">
			<p style="width:20%"></p>
		</div>
	</p>
	<p class="m10">
		<a href="" class="ui-close" hidefocus="ture">×</a>
	</p>
	<p class="m10"><label class="ui-checkbox"><input type="checkbox" /> 记住我</label></p>
</div>
</body>
</html>